/**
 * Created by Administrator on 2017/3/21.
 */
import React, { Component, Fragment } from 'react';
import { Form, Button, Badge, Select, Radio, Descriptions, Input, Modal } from 'antd';
import { connect } from 'dva';
import moment from 'moment';
import config from '@/config/config';

const { TextArea } = Input;
import request from '@/utils/request';

const { confirm } = Modal;
import { download, leaveStatue,leaveStatueImg } from '@/utils/utils';

const ButtonGroup = Button.Group;

class AddPoliciesForm extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  componentDidMount() {
  }


  render() {
    const { getFieldDecorator } = this.props.form;
    const editRecord = this.props.editRecord;
    let statusColor1=''
    let statusColor2=''
    if(editRecord.status===3||editRecord.status===5){
      statusColor1='#c60600'
    }else if(editRecord.status===4||editRecord.status===6){
      statusColor1='#1e9680'
    }
    if(editRecord.status===5){
      statusColor2='#c60600'
    }else if(editRecord.status===6){
      statusColor2='#1e9680'
    }
    return (
      <div>
        {leaveStatueImg(this.props.editRecord.status)}
        <Descriptions className={'blue-descriptions'} title={<div style={{ textAlign: 'center' }}>请假详情</div>} bordered>
          <Descriptions.Item label="申请人">{editRecord.staff_name}</Descriptions.Item>
          <Descriptions.Item label="请假类型">{editRecord.type}</Descriptions.Item>
          <Descriptions.Item label="申请时间">
            {editRecord.submit_time}
          </Descriptions.Item>
          <Descriptions.Item label="开始时间">
            {editRecord.start_time}
          </Descriptions.Item>
          <Descriptions.Item label="结束时间">
            {editRecord.end_time}
          </Descriptions.Item>
          {editRecord.time_granularity === 1 ?
            <Descriptions.Item label="请假时长">
              {editRecord.days}天
            </Descriptions.Item> :
            <Descriptions.Item label="请假时长">
              {editRecord.hours}小时
            </Descriptions.Item>}
          <Descriptions.Item label="请假事由" span={3}>
            {editRecord.cause}
          </Descriptions.Item>
          <Descriptions.Item label="请假附件" span={3}>
            {
              this.props.editRecord.attachments.map((item, index) => {
                return <div>
                  <Button type={'primary'} key={index} onClick={() => {
                    download(`${config.prefix}/leave_lists/${this.props.editRecord.id}/attachments/${item.key}/download?token=Bearer ${sessionStorage.getItem('token')}`);
                  }
                  }>点击下载附件</Button>  {item.name}

                </div>;
              })
            }
          </Descriptions.Item>
          <Descriptions.Item label="状态" span={3}>
            {leaveStatue(editRecord.status)}
          </Descriptions.Item>

          {
            (this.props.editRecord.status > 2) &&
              <Fragment>
                <Descriptions.Item label="审批人" span={1}>
                  <div style={{color:statusColor1}}> {editRecord.reviewer_name}</div>
                </Descriptions.Item>
                <Descriptions.Item label="审批时间" span={1}>
                  <div style={{color:statusColor1}}>{editRecord.review_time}</div>
                </Descriptions.Item>
                <Descriptions.Item label="审批备注" span={1}>
                  <div style={{color:statusColor1}}>{editRecord.review_remark}</div>
                </Descriptions.Item>
              </Fragment>

          }

          {
            (this.props.editRecord.status === 2 &&this.props.editRecord.reviewer_name===sessionStorage.getItem('username')) &&
            <Fragment>
              <Descriptions.Item label="审批备注" span={3}>
                {getFieldDecorator('review_remark', {
                  initialValue: this.props.editRecord ? this.props.editRecord.review_remark : '',
                })(
                  <TextArea rows={2}/>,
                )}

              </Descriptions.Item>
              <Descriptions.Item label="审批操作" span={3}>
                {getFieldDecorator('status', {
                  initialValue: 4,
                })(
                  <Radio.Group>
                    <Radio value={4}>通过审批</Radio>
                    <Radio value={3}>不通过审批</Radio>
                  </Radio.Group>,
                )}
                <Button type={'primary'} size={'small'} onClick={() => {
                  const that = this;
                  const formValues = this.props.form.getFieldsValue();
                  confirm({
                    title: `确定要${formValues.status === 4 ? '通过' : '不通过'}审批吗?`,
                    content: '提交后不可再修改',
                    okText: '确定',
                    cancelText: '取消',
                    centered: true,
                    maskClosable: true,
                    onOk() {
                      request(`/leave_lists/${editRecord.id}/review`, {
                        method: 'PUT',
                        params: {
                          ...formValues,
                        },
                      }).then((response) => {
                        if (response.status === 200) {
                          that.props.save();
                        }
                      });
                    },
                    onCancel() {
                      console.log('Cancel');
                    },
                  });
                }}>确定</Button>
              </Descriptions.Item>
            </Fragment>
          }


          {
            (this.props.editRecord.status > 4) &&
              <Fragment>
                <Descriptions.Item label="复审人" span={1}>
                  <div style={{color:statusColor2}}> {editRecord.rehearer_name}</div>
                </Descriptions.Item>
                <Descriptions.Item label="复审时间" span={1}>
                  <div style={{color:statusColor2}}>  {editRecord.rehear_time}</div>
                </Descriptions.Item>
                <Descriptions.Item label="复审备注" span={3}>
                  <div style={{color:statusColor2}}> {editRecord.rehear_remark}</div>
                </Descriptions.Item>
              </Fragment>
          }
          {
            (this.props.editRecord.status === 4 &&this.props.editRecord.rehearer_name===sessionStorage.getItem('username')) &&
            <Fragment>
              <Descriptions.Item label="复审备注" span={3}>
                {getFieldDecorator('rehear_remark', {
                  initialValue: this.props.editRecord ? this.props.editRecord.rehear_remark : '',
                })(
                  <TextArea rows={2}/>,
                )}

              </Descriptions.Item>
              <Descriptions.Item label="复审操作" span={3}>
                {getFieldDecorator('status2', {
                  initialValue: 6,
                })(
                  <Radio.Group>
                    <Radio value={6}>通过复审</Radio>
                    <Radio value={5}>不通过复审</Radio>
                  </Radio.Group>,
                )}
                <Button type={'primary'} size={'small'} onClick={() => {
                  const that = this;
                  const formValues = this.props.form.getFieldsValue();
                  confirm({
                    title: `确定要${formValues.status2 === 6 ? '通过' : '不通过'}复审吗?`,
                    content: '提交后不可再修改',
                    okText: '确定',
                    cancelText: '取消',
                    centered: true,
                    maskClosable: true,
                    onOk() {
                      request(`/leave_lists/${editRecord.id}/rehear`, {
                        method: 'PUT',
                        params: {
                          ...formValues,
                          status:formValues.status2
                        },
                      }).then((response) => {
                        if (response.status === 200) {
                          that.props.save();
                        }
                      });
                    },
                    onCancel() {
                      console.log('Cancel');
                    },
                  });
                }}>确定</Button>
              </Descriptions.Item>
            </Fragment>
          }

        </Descriptions>
      </div>
    );
  }
}

const AddPoliciesFormWrap = Form.create()(AddPoliciesForm);
export default connect()(AddPoliciesFormWrap);


